<script setup>
import PageContainer from '@/components/PageContainer.vue';
import { useUserStore } from '@/stores';
import { ref } from 'vue';
import { userUpdataInfoSetvice } from '@/api/user';
import { ElMessage } from 'element-plus';
// 回显用户信息
const { user: { username, nickname, email, id } } = useUserStore();
const userInfo = ref({
  id,
  username,
  nickname,
  email
})
const rules = {
  nickname: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入用户邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ]
}
// 提交修改
const formRef = ref(null)
const onsubmit = async () => {
  const valid = formRef.value.validate()
  if (valid) {
    await userUpdataInfoSetvice(userInfo.value)
    ElMessage.success('修改成功')
    useUserStore().setUserInfo(userInfo.value) // 更新用户信息
  }

}


</script>

<template>
  <PageContainer title="基本信息">
    <template #main>
      <el-col :span="12">
        <el-form :model="userInfo" :rules="rules" ref="formRef" label-width="100px" size="large">
          <el-form-item label="登录名称">
            <el-input v-model="userInfo.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户昵称" prop="nickname">
            <el-input v-model="userInfo.nickname"></el-input>
          </el-form-item>
          <el-form-item label="用户邮箱" prop="email">
            <el-input v-model="userInfo.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onsubmit">提交修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </template>
  </PageContainer>
</template>
